<template>
  <div>
    <div>
      <el-row>
        <el-col :span="18">
          <el-card :body-style="{ padding: '0px' }">
            <div style="padding: 14px">
              <span>{{ infoData.info }}</span>
              <div class="bottom clearfix"></div>
            </div>
            <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"> -->
            <!-- http://video.openersal.com/f08ab75fac7571ef81064701b5bb0102/4013d981784c41868369811df570d918-1c08e192245e9622f8270501d5203ce9-od-S00000001-200000.mp4 -->
            <video
              controlsList="nodownload"
              loadstart
              :poster="infoData.img"
              preload="none"
              width="1380"
              height="860"
              controls
              :src="infoData.url"
            ></video>
          </el-card>
        </el-col>
        <el-col :span="6">
          <span>{{ this.infoData.notes }}</span>
        </el-col>
      </el-row>
      <div><Carousel></Carousel></div>
    </div>
  </div>
</template>

<script>
import Carousel from "@/components/Carousel.vue";
import { selectInfoById } from "@/api/info";
import router from "@/router";
import Cookies from "js-cookie";
export default {
  components: {
    Carousel,
  },
  data() {
    return {
      infoData: [
        {
          info: "",
          img: "@/src/assets/img/123.png",
          url: "",
          notes: "",
        },
      ],
      id: "",
    };
  },
  created() {
    this.getViewData();
  },
  mounted() {},
  methods: {
    getViewData() {
      let routeId = this.$route.query.id;
      if (routeId === undefined) {
        router.push("/");
      }
      const ck = Cookies.get("expire");
      let id = { id: routeId, token: ck };

      selectInfoById(id).then((response) => {
        if (0 === response.code) {
          this.infoData = response.data;
        } else if (1 === response.code) {
          this.$message({
            message: "请联系管理员",
            type: "success",
          });
        } else if (2011 === response.code) {
          this.$message({
            message: "请联系管理员",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.time {
  font-size: 13px;
  color: #999;
}
</style>
